<template>
  <div class="header">
    <div class="header-left">
      <img src="@/assets/images/logo.png" alt="">
    </div>
    <div class="header-input">
      <span class="iconfont search-icon">&#xe65e;</span>
      <input type="text" placeholder="搜索伊的家商品">
    </div>
    <div class="header-right">
      <span class="iconfont nav-icon">&#xe714;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header
    position fixed
    top 0
    left 0
    right 0
    z-index 999
    height 1rem
    background $bgColor
    display flex
    .header-left
      width 1.2rem
      float left
      img
        width 1.04rem
        height .64rem
        margin-left .08rem
        margin-top .16rem
    .header-right
      width 1rem
      float right
      .nav-icon
        display inline-block
        width .8rem
        height .8rem
        line-height .8rem
        margin-top .1rem
        margin-left .1rem
        font-size .8rem
        color #ffffff
        text-align center
    .header-input
      display flex
      flex 1
      height .76rem
      line-height .76rem
      color $darkTextColor
      margin-top .12rem
      padding-right .1rem
      background #ffffff
      border-radius .1rem
      .search-icon
        display inline-block
        width .72rem
        height .63rem
        line-height .6rem
        margin-top .065rem
        font-size .4rem
        color #999999
        text-align center
      input
        flex 1
        height .7rem
        line-height .7rem
        margin-top .03rem
        color $darkTextColor
</style>
